 <template>
  <el-container>
    <el-main>
      <el-row class="table-wrapper">   
          <el-col :span='24'>  
            <el-form :inline="true" ref="form" :model="form" label-width="80px"> 
                <el-form-item label="分站名称">
                    <el-input v-model="form.namespace" clearable></el-input>
                </el-form-item>
                <el-form-item label="分站描述">
                    <el-input v-model="form.namespaceDesc" clearable></el-input>
                </el-form-item>
                <el-form-item label="域名">
                    <el-input v-model="form.hostName" clearable></el-input>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">创建</el-button>
                </el-form-item>
            </el-form>
          </el-col>
      </el-row>
     
      <div class="table_container">
          <el-table
              :data="allSites"
              v-loading="tableLoading"
              highlight-current-row
              style="width: 100%">
             
              <el-table-column
                property="id"
                label="序号"
                width="130">
              </el-table-column>
              <el-table-column
                property="namespace"
                label="分站名称">
              </el-table-column>
              <el-table-column
                property="namespaceDesc"
                label="分站描述">
              </el-table-column>
              <el-table-column
                property="hostName"
                label="域名">
              </el-table-column>
              <el-table-column
                label="余额">
                <template slot-scope="scope">
                  {{(scope.row.balance/100).toFixed(2)}}
                </template>
              </el-table-column>
              <el-table-column
                  label="操作"
                  width="280">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status !== "ENABLE"'>生效</el-button>
                    <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status === "ENABLE"'>失效</el-button>
                    <el-button type="primary" @click="deposit(scope.row)">充值</el-button>
                    <el-button type="primary" @click="showDepositHistory(scope.row)">充值记录</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <div class="Pagination" style="text-align: left;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
      </div>
      <el-dialog title="充值" :visible.sync="dialogFormVisible">
        <el-form :model="depositForm">
          <el-form-item label="分站">
            <el-input v-model="depositForm.namespace" :disabled="true"></el-input>
         </el-form-item>
          <el-form-item label="金额">
            <el-input v-model="depositForm.amount"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="depositForm.comment"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="depositConfirm">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="充值记录" :visible.sync="dialogTableVisible" width="70%">
        <div>
          当前查看分站：{{currentSite === null ? "" : currentSite.namespace}}
        </div>
        <el-table
            :data="depositHistoryList"
            highlight-current-row>
            <el-table-column
                property="gmtCreate"
                label="充值时间"
                width='180'>
            </el-table-column>
            <el-table-column
                label="充值金额">
                <template slot-scope="scope">
                  {{(scope.row.amount/100).toFixed(2)}}
                </template>
            </el-table-column>
            <el-table-column
                label="充值后余额">
                <template slot-scope="scope">
                  {{(scope.row.afterBalance/100).toFixed(2)}}
                </template>
            </el-table-column>
            <el-table-column
                label="备注"
                prop='comment'>
            </el-table-column>
             <el-table-column
                label="操作者"
                prop='userName'>
            </el-table-column>
        </el-table>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import {createSite, updateSite, allSite, siteDeposit, siteDeposits} from '@/api/site'
  import { mapActions, mapState } from 'vuex';

  export default {
    data () {
      return {
        form: {
          namespace: '',
          hostName: '',
          namespaceDesc: ''
        },
        currentPage: 1,
        limit: 20,
        total: 0,
        tableLoading: false,
        // sites: [],
        depositForm: {
          namespace: '',
          amount: 10000,
          comment: ''
        },
        dialogFormVisible: false,
        dialogTableVisible: false,
        currentSite: null,
        depositHistoryList: []
      }
    },
    computed: {
      ...mapState('manage', ['allSites'])
    },
    mounted () {
      this.initData()
    },
    methods: {
      ...mapActions('manage', ['getAllSites']),
      async initData () {
        this.refreshAllSites()
      },
      async refreshAllSites () {
        this.tableLoading = true
        await this.getAllSites()
        this.tableLoading = false
      },

      async createSite () {
        let loading = this.$loading({
          lock: true,
          text: '正在加载',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          let result = await createSite(this.form)
          if (result.status === 200 && result.data.code === 200) {
            this.refreshAllSites()
          } else {
            throw new Error('创建角色失败')
          }
        } catch (err) {
          console.log('创建角色失败', err)
        } finally {
          loading.close()
        }
      },
      onSubmit () {
        this.createSite()
      },
      async updateSite (site) {
        let loading = this.$loading({
          lock: true,
          text: '正在加载',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
          let result = await updateSite({
            id: site.id,
            status: site.status === 'ENABLE' ? 'CANCELED' : 'ENABLE'
          })
          if (result.status === 200 && result.data.code === 200) {
            this.refreshAllSites()
          } else {
            throw new Error('修改状态失败')
          }
        } catch (err) {
          console.log('修改状态失败', err)
        } finally {
          loading.close()
        }
      },
      updateStatus (site) {
        this.updateSite(site)
      },
      handleSizeChange (size) {
        this.limit = size
        this.refreshAllSites()
      },
      handleCurrentChange (page) {
        this.currentPage = page
        this.refreshAllSites()
      },

      async depositConfirm() {
        try {
          let deposit = Object.assign({}, this.depositForm)
          deposit.amount = parseInt(deposit.amount * 100)
          let result = await siteDeposit(deposit)
          if (result.status === 200 && result.data.code === 200) {
            this.refreshAllSites()
          } else {
            throw new Error('修改状态失败')
          }
        } catch (error) {
            console.log('修改状态失败', error)
        } finally {
          this.dialogFormVisible = false
        }
      },

      deposit(site) {
        this.dialogFormVisible = true
        this.depositForm.namespace = site.namespace
      },
      showDepositHistory(site) {
        this.dialogTableVisible = true
        this.currentSite = site
        this.depositHistoryList = []
        this.depositHistory()
      },
      async depositHistory() {
        try {
          let result = await siteDeposits(this.currentSite.namespace)
          if (result.status === 200 && result.data.code === 200) {
            this.depositHistoryList = result.data.data
          } else {
            throw new Error('获取充值历史失败')
          }
        } catch (error) {
          console.log('修改状态失败', err)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .manage_tip {
      margin-bottom: 10px;
    }
    .introduct{
        width: 900px;
        text-align: center;
        margin: auto;
    }
    .tip {
        font-size: 12px;
    }
    .tip strong {
        color: red;
        font-weight: bold;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }
    // .el-button {
    //   width: 200px;
    //   margin: auto;
    //   display: block;
    // }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }

    .batch-table{
        max-height: 400px;
        overflow: auto;
    }
</style>

 